<div id="content_header">
  <h3>Terms Management</h3>
</div>

<!-- TITLE -->
<div class="row row-unstyled">
  <div class="col-md-12">
    <label>SEARCH</label>
  </div>
</div>

<!-- SEARCH FORMS -->
<div class="row">
  <div class="col-md-6 col-lg-4">
    <form action="#" class="form-vertical">
      <div class="input-group">
        <input class="form-control" type="text" name="keyword" placeholder="Type Name to search" ng-model="searchText">
        <span class="input-group-addon">Find!</span>
      </div>
    </form>
  </div>
  <div class="col-md-6 col-lg-4">
    <a  class="btn btn-primary" pageslide="right" ps-speed="0.25" href="#form" ps-auto-close="true" ps-open="psForm" ng-click="psForm = !psForm">Register a new term</a>
    <!-- <a ui-sref="^.new" class="btn btn-primary">Register a new term</a> -->
  </div>
</div>

<br>

<!-- SEARCH RESULT -->
<div class="row">
  <div class="col-md-12">
    <label>RESULTS</label>
    <div class="search-message">
      Found <span class="primary-color"><b>{{ terms.length | filter:searchText }}</b></span> records
    </div>
  </div>
</div>

<!-- SLIDE PANEL -->
<div style="padding:20px" id="form">
  <h3>Register a new term <a ng-click="psForm = !psForm"><i class="simple-icon-close"></i></a></h3>
  <hr>
  <form name="termForm" role="form" ng-submit="addTerm()">

    <div class="form-group" ng-class="{ 'has-error': (errors.errors.Number || errors.errors.Year)}">
      <label class="required" for="Number">Term / Year</label>
      <div class="row">
        <div class="col-xs-6">
          <input type="number" name="Number" class="form-control" id="" placeholder="Input field" ng-model="termNew.Number" required>
          <error-widget field="errors.errors.Number"></error-widget>
        </div>
        <div class="col-xs-6">
          <input type="number" name="year" class="form-control" id="" placeholder="Input field" ng-model="termNew.Year" required>
          <error-widget field="errors.errors.Year"></error-widget>
        </div>
      </div>
    </div>

    <div class="form-group" ng-class="{ 'has-error': errors.errors.StartDate}">
      <label class="required" for="">Start Date</label>
      <div class="input-group" ng-click="openDatepicker($event, 0)">
        <input type="hidden" class="form-control" datepicker-popup="{{format}}" ng-model="timepicker.timeA" is-open="datePicker.isOpen[0]" datepicker-options="dateOptions" ng-required="true" close-text="Close" ng-disabled="true" />
        <input type="text" class="form-control" ng-disabled="true" ng-value="timepicker.timeA | date: 'dd MMMM yyyy'">
        <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
      </div>
      <error-widget field="errors.errors.StartDate"></error-widget>
    </div>

    <div class="form-group" ng-class="{ 'has-error': errors.errors.EndDate}">
      <label class="required" for="">End Date</label>
      <div class="input-group" ng-click="openDatepicker($event, 1)">
        <input type="hidden" class="form-control" datepicker-popup="{{format}}" ng-model="timepicker.timeB" is-open="datePicker.isOpen[1]" min-date="timepicker.timeA" datepicker-options="dateOptions" ng-required="true" close-text="Close" ng-disabled="true" />
        <input type="text" class="form-control" ng-disabled="true" ng-value="timepicker.timeB | date: 'dd MMMM yyyy'">
        <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
      </div>
      <error-widget field="errors.errors.EndDate"></error-widget>
    </div>

    <div class="form-group" ng-class="{ 'has-error': errors.errors.CourseType}">
      <label class="required" for="CourseType">
        Course Type
      </label>
      <br>
      <!-- <select name="CourseType" class="form-control" id="CourseType" ng-model="termNew.CourseType.Id" ng-options="coursetype.Id as coursetype.Code +' - '+ coursetype.Name for coursetype in coursetypes" required>
        <option value="" ng-hide="termNew.CourseType.Id">Select a Course Type.</option>
      </select> -->
      <label ng-repeat="item in coursetypes"><input type="checkbox" ng-click="validate(item)"> {{ item.Code }} - {{item.Name}} <span ng-show="errors.BatchNumber === $index"><i class="fa fa-arrow-left"></i> error</span></label>
      <error-widget field="errors.errors.CourseType"></error-widget>
    </div>


    <button type="submit" class="btn btn-primary" >Submit</button>
  </form>
</div>

<!-- TABLE -->
<div class="row">

    <tabset justified="true">
      <tab heading="{{ CourseType.Name }}" ng-repeat="CourseType in coursetypes" select="loadTerms(CourseType.Id)">
        <table class="table table-stripped table-bordered" ng-show="terms.length > 0">
          <thead>
            <tr>
              <th>No</th>
              <th><a href="" ng-click="orderBy('Year')">Term / Year <i ng-class="{'fa fa-chevron-down' : (params.orderBy === 'Year' && params.orderType === 'DESC'), 'fa fa-chevron-up' : (params.orderBy === 'Year' && params.orderType === 'ASC')}"></i></a></th>
              <th><a href="" ng-click="orderBy('StartDate')">Start Date <i ng-class="{'fa fa-chevron-down' : (params.orderBy === 'StartDate' && params.orderType === 'DESC'), 'fa fa-chevron-up' : (params.orderBy === 'StartDate' && params.orderType === 'ASC')}"></i></a></th>
              <th><a href="" ng-click="orderBy('EndDate')">End Date <i ng-class="{'fa fa-chevron-down' : (params.orderBy === 'EndDate' && params.orderType === 'DESC'), 'fa fa-chevron-up' : (params.orderBy === 'EndDate' && params.orderType === 'ASC')}"></i></a></th>
              <th>Course Type</th>
              <th>Action</th>
            </tr>
          </thead>
          <tbody>
            <tr dir-paginate="term in terms | itemsPerPage: params.pagesize" total-items="totalItems">
              <td>{{ ((pagination.current-1)*params.pagesize) + ($index+1) }}</td>
              <td>{{ term.Number }} / {{ term.Year }}</td>
              <td>{{ term.StartDate | date:'longDate' }}</td>
              <td>{{ term.EndDate | date:'longDate' }}</td>
              <td>{{ term.CourseType.Code }} - {{ term.CourseType.Name }}</td>
              <td>
                <a class="" href ng-really-message="Are you sure want to delete this data?" ng-really-click="delete('terms', term.Id, {collection: terms, index: $index})"><i class="simple-icon-trash"></i></a>
                <a class="" ui-sref="^.show({id: term.Id})"><i class="glyphicon glyphicon-edit"></i></a>
              </td>
            </tr>
          </tbody>
        </table>
    <dir-pagination-controls on-page-change="pageChanged(newPageNumber)" template-url="views/templates/dirPagination.tpl.html"></dir-pagination-controls>
      </tab>
    </tabset>
</div>